<template>
  <div class="tag-container">
    <div class="tag-top">
      <h3>标签管理</h3>
      <div class="search-box">

      </div>
    </div>
     <div class="tag-content">
       <el-table
         :data="tagList"
         style="width: 100%">
         <el-table-column type="index"></el-table-column>
         <el-table-column prop="tag" label="标签名称"></el-table-column>
         <el-table-column prop="tagTypeName" label="标签类型"></el-table-column>
         <el-table-column  fixed="right" label="操作">
           <template slot-scope="scope">
             <el-button
               size="mini"
               @click="handleEdit(scope.$index, scope.row)">编辑
             </el-button>
             <el-button
               size="mini"
               @click="handleAdd(scope.$index, scope.row)">添加
             </el-button>
           </template>
         </el-table-column>
       </el-table>
       <!--分页-->
       <div class="pagination">
         <el-pagination
           background
           layout="prev, pager, next"
           :current-page="pageIndex"
           @current-change="currentChange"
           :page-count="pageCount">
         </el-pagination>
       </div>
     </div>

      <el-dialog
        title="提示"
        :visible.sync="dialogVisibleEdit"
        :show-close="false"
        :close-on-click-modal="false"
        width="40%">
       <div class="pop-box">
         <div class="grid-content">
           <p>标签类型：</p>
           <el-select v-model="tagType" placeholder="请选择标签类型">
             <el-option
               v-for="item in tagTypeList"
               :key="item.datDictDtlCd"
               :label="item.datDictDtlNm"
               :value="item.datDictDtlCd">
             </el-option>
           </el-select>
         </div>
         <div class="grid-content">
           <p>标签名称：</p> <el-input v-model="tag" placeholder="请输入标签名称"></el-input>
         </div>
       </div>
        <span slot="footer" class="dialog-footer">
           <el-button @click="dialogVisibleEdit = false">取 消</el-button>
           <el-button type="primary" @click="handleSubmit">确 定</el-button>
         </span>
      </el-dialog>
    </div>
</template>

<script>
  import apiDataFilter from "../../../utils/apiDataFilter";
  import Cookies from 'js-cookie'
  export default {
    name: "tags",
    data(){
      return{
        tagList:[],
        pageCount:null,
        pageIndex:1,
        dialogVisibleEdit:false,
        headers:{token:Cookies.get('Authorization')},
        id:null,
        tag:null,
        tagType:null,
        tagTypeList:[],
      }
    },
    methods:{
      //初始化标签数据
      getTagsList(){
        let param = {page:this.pageIndex,pageSize:15,id:0,tagType:0};
        apiDataFilter.request({
          apiPath:'tag.get',
          data:param,
          method:'post',
          successCallback:(res)=>{
            this.tagList = res.data.list;
            this.pageCount = Math.ceil(res.data.totalCount/15);
          }
        })
      },
      /*标签类型list*/
      getTagTypeList(){
        let param = {page:1,pageSize:100,datDictCd:'107'};
        apiDataFilter.request({
          apiPath:'tag.tagTypeDict',
          data:param,
          method:'post',
          successCallback:(res)=>{
            this.tagTypeList =res.data.list;
          }
        })
      },
      //处理编辑标签
      handleSubmit(){
        if (!this.tag || !this.tagType){
          this.$message.error('请完善信息');
          return;
        }
        this.tagUpdata();
      },
      /*修改标签*/
      tagUpdata(){
        let param = {id:this.id,tag:this.tag,tagType:this.tagType};
        apiDataFilter.request({
          apiPath:'tag.editTag',
          method:'post',
          data:param,
          successCallback:(res)=>{
            this.$message.success('提交成功');
            this.dialogVisibleEdit = false;
            this.getTagsList();
          }
        })
      },
      currentChange(val){
        this.pageIndex = val;
        this.getTagsList();
      },
      /*编辑*/
      handleEdit(index,row){
        this.id = row.id;
        this.tag = row.tag;
        this.tagType = row.tagType;
        this.dialogVisibleEdit = true;
      },
      /*添加*/
      handleAdd(index,row){
        this.tagType = row.tagType;
        this.dialogVisibleEdit = true;
      },
    },
    created(){
      this.getTagsList();
      this.getTagTypeList();
    }
  }
</script>

<style scoped lang='less'>
    @import "tags.less";
</style>
